<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>考场管理-每场考试学生</title>
    <link rel="stylesheet" th:href="@{/lib/layui-v2.6.3/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/layuimini.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/themes/default.css}" media="all">
    <link rel="stylesheet" th:href="@{/lib/font-awesome-4.7.0/css/font-awesome.min.css}" media="all">
    <style>
        .div-content{
            background-color: white;
            border-radius: 5px;
            padding: 14px;
        }
        .table-search-fieldset{
            margin: 0;
            border: 1px solid #e6e6e6;
            padding: 10px 20px 5px 20px;
            color: #6b6b6b;
        }

    </style>
</head>
<body>
<div class="div-content">
    <!--搜索条件查询-->
    <form class="layui-form layui-form-pane" action="" id="form-search">
        <fieldset class="table-search-fieldset">
            <legend>搜索条件</legend>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label" style="width: 90px">考试日期</label>
                    <div class="layui-input-inline" style="width: 130px;">
                        <input type="text" id="examtime" name="examtime" autocomplete="off" class="layui-input" placeholder="请选择日期">
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label" style="width: 60px">机房</label>
                    <div class="layui-input-inline" style="width: 250px;">
                        <select id="room" name="roomaddr">
                            <option value="">请选择</option>
                        </select>
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label" style="width: 60px">校区</label>
                    <div class="layui-input-inline" style="width: 120px;">
                        <select name="campus">
                            <option value="">请选择</option>
                            <option value="1">花津校区</option>
                            <option value="2">赭山校区</option>
                            <option value="3">天门山校区</option>
                        </select>
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label" style="width: 80px">课程名</label>
                    <div class="layui-input-inline" style="width: 130px;">
                        <select id="course" name="cname">
                            <option value="">请选择</option>
                        </select>
                    </div>
                </div>

                <div class="layui-inline">
                    <button id="btn-search" lay-submit lay-filter="btn-search-filter" type="button" class="layui-btn layui-btn-radius layui-btn-normal layui-btn-sm">
                        <i class="layui-icon layui-icon-search"></i>
                        搜索
                    </button>
                    <button id="btn-reset" type="reset" class="layui-btn layui-btn-radius layui-btn-primary layui-btn-sm">
                        <i class="layui-icon layui-icon-fonts-clear"></i>
                        清空条件
                    </button>
                </div>
            </div>
        </fieldset>
    </form>

    <!--表格显示-->
    <table id="table-booklist" lay-filter="table-booklist-filter"></table>
</div>
<script th:src="@{/lib/layui-v2.6.3/layui.js}" charset="utf-8"></script>
<script th:src="@{/js/jquery-3.6.0.min.js}" charset="utf-8"></script>
<script th:src="@{/layui_exts/excel.js}" charset="utf-8"></script>
<script type="text/html" id="table-book-toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="deleteAll">全部删除</button>
    </div>
</script>
<script type="text/html" id="col-book-bar">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="edit">查看</a>
</script>
<script th:inline="javascript">
    layui.use(['laydate','layer','form','tree', 'util','table'],function () {
        var laydate = layui.laydate;
        var form=layui.form;
        var layer=layui.layer;
        var $=layui.$;
        var tree = layui.tree;
        var util = layui.util;
        var table=layui.table;

        //时间选择器
        laydate.render({
            elem:'#examtime'
        });

        //点击清空条件时刷新页面
        $("#btn-reset").click(function () {
            window.location.reload()
        });

        //加载机房地址
        var roomAddr=[[${roomAddr}]]
        for(let i=0;i<roomAddr.length;i++){
            $("#room").append(
                '<option value="'+roomAddr[i]+'">'+roomAddr[i]+'</option>'
            )
        }
        //加载课程名
        var course=[[${cname}]]
        for(let i=0;i<course.length;i++){
            $("#course").append(
                '<option value="'+course[i]+'">'+course[i]+'</option>'
            )
        }
        form.render();

        //加载页面时机房列表表格渲染
        table.render({
            elem: '#table-booklist'
            ,url: '/showeRoom' //数据接口
            ,page: true //开启分页
            ,toolbar:"#table-book-toolbar"
            ,limits:[6,8,10,20]
            ,cols: [
                [   //表头
                    {type:"checkbox",width: 70, rowspan:2},
                    {field: 'erordId', title: '考场编号',width:125,align:'center'},
                    {field: 'roomAddr', title: '机房地址', width:270,align:'center'},
                    {field: 'examDate', title: '考试日期', width:140,align:'center'},
                    {field: 'estartTime', title: '开始时间', width:140,align:'center'},
                    {field: 'eendTime', title: '结束时间', width:140,align:'center'},
                    {field: 'etype', title: '课程名', width:140,align:'center'},
                    {field: 'enumber', title: '考场人数', width:140,align:'center'},
                    {title: '操作', width: 90,align:'center',toolbar: '#col-book-bar'}
                ]
            ],
            defaultToolbar:[
                "filter","print",{
                    title:"导出",
                    layEvent:"LAYTABLE_EXCEL",
                    icon:"layui-icon-table"
                }
            ]
        });

        //监听表单提交（根据搜索条件查询机房）
        form.on('submit(btn-search-filter)', function(data){
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            let substr="";
            let arr={"examtime":data.field.examtime, "roomaddr":data.field.roomaddr,"campus":data.field.campus,"cname":data.field.cname};
            for(let i in arr){
                if(arr[i]===""||arr[i]===undefined){delete arr[i]}
            }
            for(let j in arr){substr+="&"+j+"="+arr[j];}
            substr=substr.substring(1);
            console.log(substr)

            table.render({
                 elem: '#table-booklist'
                ,url: '/showeRoom?'+substr //数据接口
                ,page: true //开启分页
                ,toolbar:"#table-book-toolbar"
                ,limits:[6,8,10,20]
                ,cols: [
                    [ //表头
                        {type:"checkbox",width: 70, rowspan:2},
                        {field: 'erordId', title: '考场编号',width:125,align:'center'},
                        {field: 'roomAddr', title: '机房地址', width:270,align:'center'},
                        {field: 'examDate', title: '考试日期', width:140,align:'center'},
                        {field: 'estartTime', title: '开始时间', width:140,align:'center'},
                        {field: 'eendTime', title: '结束时间', width:140,align:'center'},
                        {field: 'etype', title: '课程名', width:140,align:'center'},
                        {field: 'enumber', title: '考场人数', width:140,align:'center'},
                        {title: '操作', width: 90,align:'center',toolbar: '#col-book-bar'}
                    ]
                ],
                defaultToolbar:[
                    "filter","print",{
                        title:"导出",
                        layEvent:"LAYTABLE_EXCEL",
                        icon:"layui-icon-table"
                    }
                ]
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        table.on('tool(table-booklist-filter)', function(obj){
            var data = obj.data; //获得当前行数据
            console.log(data);
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            if(layEvent=='edit'){   //每一行的编辑操作
                layer.open({
                    type: 2,
                    title:"查看考生",
                    area:['65%','95%'],
                    content: '/room/showAll?examDate='+data.examDate+"&order="+data.erordId+"&etype="+data.etype
                });
            }
        });

        //表格头部工具栏监听（删除）
        table.on('toolbar(table-booklist-filter)', function(obj){
            // if(obj.event=="delete"){  //表头的批量删除
            //     var checkStatus = table.checkStatus('table-booklist'); //idTest 即为基础参数 id 对应的值
            //     console.log(checkStatus.data) //获取选中行的数据
            //     //没选中数据
            //     if(checkStatus.data.length==0){
            //         layer.alert("您没有选中任何数据！",{icon:2,anim:6,title:"警告"});
            //         return false;
            //     }
            //     //选中id
            //     var idArr=new Array();
            //     $(checkStatus.data).each(function () {
            //         idArr.push(this.erordId);
            //     });
            //     console.log(idArr.join(","));
            //
            //     layer.confirm('您确认删除所选考场信息吗?', {icon: 3, title:'删除确认'}, function(index){
            //         // 异步请求，删除数据
            //         $.ajax({
            //             url:"/eRoom/delete/"+idArr.join(","),
            //             success:function (response) {
            //                 if(response.state==200){
            //                     layer.msg(response.message,{
            //                         icon: 1,
            //                         time: 1000
            //                     },function () {
            //                         $("#btn-reset").click();
            //                     });
            //                 }else {
            //                     layer.alert(response.message,{icon:2,anim:6});
            //                 }
            //             }
            //         });
            //         layer.close(index);
            //     });
            // }else
            if(obj.event==="LAYTABLE_EXCEL"){  //导出为Excel表格
                $.ajax({
                    url: "/export/allroom", //后端接口
                    dataType:'json',
                    success:function (res) {
                        console.log(res.data)
                        // table.exportFile('table-booklist',res.data,'xls');  //导出函数调用
                        let data1=res.data;
                        data1.unshift({erordId:'考场编号',roomAddr:'考场地址',examDate:'考试日期',etype:'课程名称',enumber:'考场人数'});
                        var a1=LAY_EXCEL.filterExportData(data1,[
                            'erordId','roomAddr','examDate','estartTime','eendTime','etype','enumber'
                        ]);
                        var colConf=LAY_EXCEL.makeColConfig({'B':180,'D':140,'F':150},100);
                        var mergeConf = LAY_EXCEL.makeMergeConfig([
                            ['C1', 'E1']
                        ]);
                        LAY_EXCEL.setExportCellStyle( a1,'A1:H'+a1.length+1, {
                            s: {
                                alignment: {
                                    horizontal: 'center',
                                    vertical: 'center'
                                }
                            }
                        }, function(cell, newCell, row, config, currentRow, currentCol, fieldKey) {
                            return newCell;
                        } );
                        LAY_EXCEL.exportExcel({
                            考场分布:a1,
                        },'1.xlsx','xlsx',{
                            extend:{
                                '!cols':colConf,
                                '!merges': mergeConf
                            }
                        });
                    }
                });
            }else if(obj.event=="deleteAll"){
                layer.confirm('您确认删除所有考场信息吗?', {icon: 3, title:'删除确认'}, function(index){
                    // 异步请求，删除数据
                    $.ajax({
                        url:"/eRoom/deleteAll",
                        success:function (response) {
                            if(response.state==200){
                                layer.msg(response.message,{
                                    icon: 1,
                                    time: 1000
                                },function () {
                                    $("#btn-reset").click();
                                });
                            }else {
                                layer.alert(response.message,{icon:2,anim:6});
                            }
                        }
                    });
                    layer.close(index);
                });
            }
        });
    });
</script>
</body>
</html>